<template>
	<div class="user-management-container">
		<!-- 面包屑导航 -->
		<el-breadcrumb separator="/" class="el-breadcrumb">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>
				<a href="/user">公司管理</a>
			</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 搜索区域 -->
		<div class="text">
			公司名 <el-input class="toal" v-model="masseage.companyName" style="width: 240px" size="large"
				placeholder="请输入公司名" :prefix-icon="Search" />
			公司地址 <el-input class="toal" v-model="masseage.companyAddress" style="width: 240px" size="large"
				placeholder="请输入公司地址" :prefix-icon="Search" />
			<el-button type="primary" class="but" @click="querry">搜索</el-button>
		</div>
		<el-dialog v-model="dialogVisible" :title="title" width="950px" :before-close="handleClose">
			<div class="ex">公司名 ：<el-input v-model="coursemessa.name" style="width: 240px" placeholder="请输入公司名"
					size="large" /></div>
			<div class="ex">公司地址：<el-input v-model="coursemessa.address" style="width: 240px"
					placeholder="请输入公司地址" size="large" /></div>
			<div class="ex">公司电话：<el-input v-model="coursemessa.mobile" style="width: 240px" placeholder="请输入公司电话"
					size="large" /></div>
			<div class="ex"> 公司邮件：<el-input v-model="coursemessa.email" style="width: 240px"
					placeholder="请输入公司邮件" size="large" /></div>
			<div class="ex"> 公司介绍：<el-input v-model="coursemessa.description" style="width: 240px" placeholder="请输入公司介绍" size="large" /></div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="saveUser">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<el-table :border="true" :data="dataList" row-key="id" default-expand-all style="width: 100%;"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="ID" />
			<el-table-column prop="name" label="公司名称" />
			<el-table-column prop="address" label="公司地址" />
			<el-table-column prop="mobile" label="公司电话" />
			<el-table-column prop="email" label="公司邮件" />
			<el-table-column prop="description" label="公司介绍" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="primary" size="small" style="margin-right: 5px;"
						@click="editUser(scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="deleteUser(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页控件 -->
		<el-pagination v-model:current-page="masseage.pageNum" v-model:page-size="masseage.pageSize"
			:page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
			@size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
	import { ElMessage, ElMessageBox } from 'element-plus';
	import { Search } from '@element-plus/icons-vue';

	const dialogVisible = ref(false);
	const title = ref('新增用户');
	const masseage = ref({
		id: '',
		companyName: '',
		companyAddress: '',
		companyPhone: '',
		companyEmail: '',
		companyIntro: '',
		description: '',
		pageSize: 10,
		pageNum: 1
	});
	const coursemessa = ref({
		id: '',
		name: '',
		address: '',
		mobile: '',
		email: '',
		description: '',
		erCode: '',
	});
	const dataList = ref([]);
	const total = ref(0);
	const selectedRows = ref([]);
	const batchLoading = ref(false);
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;

	const querry = () => {
		axios.get('/company/page', {
			params: masseage.value
		}).then((resp) => {
			console.log(resp);
			if (resp.code === 200) {
				dataList.value = resp.data.list;
				total.value = resp.data.total;
			} else {
				ElMessage.error('数据查询失败');
			}
		}).catch(() => {
			ElMessage.error('网络请求出错');
		});
	};

	const handleSelectionChange = (val) => {

		selectedRows.value = val.map(item => {
			return item.id
		});
	};

	// 编辑用户
	const editUser = (row) => {
		title.value = "编辑用户";
		dialogVisible.value = true;

		// 复制行数据到表单，避免直接修改原数据
		coursemessa.value = {
			...row,
		};
	};

	const saveUser = () => {
		// 简单验证
		if (!coursemessa.value.name) {
			ElMessage.warning('请输入用户名');
			return;
		}

		const method = coursemessa.value.id ? 'put' : 'post';
		const url = `/company`;

		axios[method](url, coursemessa.value).then((resp) => {
			if (resp.code === 200) {
				ElMessage.success(coursemessa.value.id ? '编辑成功' : '新增成功');
				dialogVisible.value = false;
				querry();
			} else {
				ElMessage.error(coursemessa.value.id ? '编辑失败' : '新增失败');
			}
		}).catch(() => {
			ElMessage.error('网络请求出错');
		});
	};

	// 删除用户
	const deleteUser = (id) => {
		ElMessageBox.confirm(
			'此操作将永久删除该用户, 是否继续?',
			'提示',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			axios.delete(`/company/${id}`).then(resp => {
				if (resp.code === 200) {
					ElMessage.success('删除成功');
					querry();
				} else {
					ElMessage.error('删除失败');
				}
			}).catch(() => {
				ElMessage.error('网络请求出错');
			});
		}).catch(() => {
			ElMessage.info('已取消删除');
		});
	};

	const handleSizeChange = (val) => {
		masseage.value.pageSize = val;
		querry();
	};

	const handleCurrentChange = (val) => {
		masseage.value.pageNum = val;
		querry();
	};


	const close = () => {
		coursemessa.value = {
			id: '',
			name: '',
			address: '',
			mobile: '',
			email: '',
			description: '',
			erCode: '',
		};
		dialogVisible.value = false;
	};

	const handleClose = () => {
		close();
	};

	const batchRemove = () => {
		ElMessageBox.confirm(
			'此操作将永久删除该用户, 是否继续?',
			'提示',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			axios.delete(`/company/`, {
				params: {
					ids: selectedRows.value.join(',')
				}
			}).then(resp => {
				if (resp.code === 200) {
					ElMessage.success('删除成功');
					querry();
				} else {
					ElMessage.error('删除失败');
				}
			}).catch(() => {
				ElMessage.error('网络请求出错');
			});
		}).catch(() => {
			ElMessage.info('已取消删除');
		});
	}
	onMounted(() => {
		querry();
	});
</script>

<style scoped>
	.el-breadcrumb {
		height: 30px;
		text-align: center;
		border-bottom: 1px solid #FAFAFA;
	}

	div .text {
		font-size: 15px;
		height: 60px;
		padding-top: 10px;
		border-bottom: 1px solid #FAFAFA;
		color: darkgray;
	}

	.toal {
		padding-right: 10px;
	}

	.but {
		height: 40px;
		margin-right: 5px;
	}

	div .ex {
		margin-top: 20px;
		margin-bottom: 20px;
	}
</style>